<template>
    <div style="marin:0;padding:0">
        <el-row>
            <el-col :span="24">
                <el-tabs type="border-card" class="card-table" @tab-click="headerageClick" value="1">
                    <el-tab-pane label="当天" name="1">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">{{ order }}</p>
                                        <p>总运单数 ( 单 )</p>
                                        <el-button type="primary" round @click="btn_click(1)">立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">{{ label }}</p>
                                        <p>总设备数</p>
                                        <el-button type="primary" round @click="btn_click(2)">立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col><el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">{{transit_waybill}}</p>
                                        <p>在途运单</p>
                                        <el-button type="primary" round @click="btn_click(3)">立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col><el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">{{signed_in}}</p>
                                        <p>已签收</p>
                                        <el-button type="primary" round @click="btn_click(4)">立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="7天" name="2">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>总运单数 ( 单 )</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>总设备数</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col><el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>在途运单</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col><el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>报警运单</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="30天" name="3">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>总运单数 ( 单 )</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>总设备数</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col><el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>在途运单</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col><el-col :span="6">
                                <div class="grid-content bg-purple counting-module">
                                    <center>
                                        <p style="font-size:30px">1</p>
                                        <p>报警运单</p>
                                        <el-button type="primary" round>立刻查看</el-button>
                                    </center>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <el-row style="margin-top:30px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="highcharts-container" ref='mydiv'>
                        <highcharts-component :options="options" :styles="styles" ref="simpleChart"></highcharts-component>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top:30px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="box-header">
                        <p style="font-size:1.5em">运单信息</p>
                        <el-date-picker
                        v-model="value1"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    
                    
                <el-tabs type="border-card" class="card-table" @tab-click="headerClick" value="1">
                    <el-tab-pane label="全部" name="1">
                        <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                            <el-table-column
                            prop="date"
                            label="发货单号"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="设备ID"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="货物类型">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="安全温度(°C)">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="记录间隔">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="启动延时">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="开始时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="结束时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="运单状态">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="温度记录">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="在途" name="2">
                        <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                            <el-table-column
                            prop="date"
                            label="发货单号"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="设备ID"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="货物类型">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="安全温度(°C)">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="记录间隔">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="启动延时">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="开始时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="结束时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="运单状态">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="温度记录">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="完成" name="3">
                        <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                            <el-table-column
                            prop="date"
                            label="发货单号"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="设备ID"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="货物类型">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="安全温度(°C)">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="记录间隔">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="启动延时">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="开始时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="结束时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="运单状态">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="温度记录">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="报警" name="4">
                        <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                            <el-table-column
                            prop="date"
                            label="发货单号"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="设备ID"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="货物类型">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="安全温度(°C)">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="记录间隔">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="启动延时">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="开始时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="结束时间">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="运单状态">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="温度记录">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
                    <!-- <div id="highmaps" class="container"></div> -->
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';
import $ from 'jquery'
import {get_order_list_get,get_tags_list_get} from './axios_api/api.js'
Highmaps(Highcharts);
export default {
    data() {
        return {
            // 运输中的订单数量
            transit_waybill: 0,
            // 已签收的运单数量
            signed_in:0,
            order: 0,
            label: 0,
            options: {
                title: {
                    text: '运单统计'
                },
                xAxis: {
                    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '26', '27', '28', '29', '30']
                },
                yAxis: {
                    title: {
                        text: '运单数量'
                    },
                    lineWidth: 2,
                    line:150,
                    lineColor: '#F33',
                    id: 'temperature-axis'
                },
                series: [{
                    name: '发货数量',
                    data: [0, ],
                    color: '#F33'
                },{
                    name: '收货数量',
                    data: [7, ],
                    color: 'black'
                }]
            },
            
            styles: {
              width: 1500,
              height: 350
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],

            

        }
    },
    mounted() {
        
      this.get_order_list()
      this.get_tags_list()
      this.highmaps();
      this.initChart()

    },
    methods: {
        highmaps() {
            Highcharts.setOptions({
                lang: {
                    drillUpText: '< 返回 “{series.name}”'
                }
            });
            var map = null,
                geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
            $.getJSON(geochina + 'china.json&callback=?', function(mapdata) {
                var data = [];
                // 随机数据
                Highcharts.each(mapdata.features, function(md, index) {
                    var tmp = {
                        name: md.properties.name,
                        value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
                    };
                    if(md.properties.drilldown) {
                        tmp.drilldown = md.properties.drilldown;
                    }
                    data.push(tmp);
                });
                map = new Highcharts.Map('highmaps', {
                    chart: {
                        events: {
                            drilldown: function(e) {
                                console.log(e);
                                // 异步下钻
                                if (e.point.drilldown) {
                                    var pointName = e.point.properties.fullname;
                                    map.showLoading('下钻中，请稍后...');
                                    // 获取二级行政地区数据并更新图表
                                    $.getJSON(geochina +   e.point.drilldown + '.json&callback=?', function(data) {
                                        data = Highcharts.geojson(data);
                                        Highcharts.each(data, function(d) {
                                            if(d.properties.drilldown) {
                                                d.drilldown = d.properties.drilldown;
                                            }
                                            d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                                        });
                                        map.hideLoading();
                                        map.addSeriesAsDrilldown(e.point, {
                                            name: e.point.name,
                                            data: data,
                                            dataLabels: {
                                                enabled: true,
                                                format: '{point.name}'
                                            }
                                        });
                                        map.setTitle({
                                            text: pointName
                                        });
                                    });
                                }
                            },
                            drillup: function() {
                                map.setTitle({
                                    text: '中国'
                                });
                            }
                        }
                    },
                    title: {
                        text: '中国地图'
                    },
                    subtitle: {
                        text: '公司业务范围'
                    },
                    mapNavigation: {
                        enabled: true,
                        buttonOptions: {
                            verticalAlign: 'bottom'
                        }
                    },
                    tooltip: {
                        useHTML: true,
                        headerFormat: '<table><tr><td>{point.name}</td></tr>',
                        pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
                        '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
                        '<tr><td>所属</td><td>{point.properties.parent}</td></tr>' +
                        '<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>' ,
                        footerFormat: '</table>'
                    },
                    colorAxis: {
                        min: 0,
                        minColor: '#fff',
                        maxColor: '#BE002F',
                        labels:{
                            style:{
                                "color":"#00FFFF","fontWeight":"bold"
                            }
                        }
                    },
                    series: [{
                        data: data,
                        mapData: mapdata,
                        joinBy: 'name',
                        name: '中国地图',
                        states: {
                            hover: {
                                color: '#a4edba'
                            }
                        }
                    }]
                });
            });

        },
        
        getMoreOptions(type) {
          if(type === 'columnrange') {
            return {
                chart: {
                    type: 'columnrange',
                    inverted: true
                },
                title: {
                    text: '每月温度变化范围'
                },
                subtitle: {
                    text: '2009 挪威某地'
                },
                xAxis: {
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    title: {
                        text: '温度 ( °C )'
                    }
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                plotOptions: {
                    columnrange: {
                        dataLabels: {
                            enabled: true,
                            formatter: function () {
                                return this.y + '°C';
                            }
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                series: [{
                    name: '温度',
                    data: [
                        [-9.7, 9.4],
                        [-8.7, 6.5],
                        [-3.5, 9.4],
                        [-1.4, 19.9],
                        [0.0, 22.6],
                        [2.9, 29.5],
                        [9.2, 30.7],
                        [7.3, 26.5],
                        [4.4, 18.0],
                        [-3.1, 11.4],
                        [-5.2, 10.4],
                        [-13.5, 9.8]
                    ]
                }]
            }
          } else if(type === 'drilldown') {
            return {
                chart:
                {
                    type: 'column'
                },
                title:
                {
                    text: 'Basic drilldown'
                },
                xAxis:
                {
                    type: 'category'
                },
                legend:
                {
                    enabled: false
                },
                plotOptions:
                {
                    series:
                    {
                        borderWidth: 0,
                        dataLabels:
                        {
                            enabled: true
                        }
                    }
                },
                series: [
                {
                    name: 'Things',
                    colorByPoint: true,
                    data: [
                    {
                        name: 'Animals',
                        y: 5,
                        drilldown: 'animals'
                    },
                    {
                        name: 'Fruits',
                        y: 2,
                        drilldown: 'fruits'
                    },
                    {
                        name: 'Cars',
                        y: 4,
                        drilldown: 'cars'
                    }]
                }],
                drilldown:
                {
                    series: [
                    {
                        id: 'animals',
                        data: [
                            ['Cats', 4],
                            ['Dogs', 2],
                            ['Cows', 1],
                            ['Sheep', 2],
                            ['Pigs', 1]
                        ]
                    },
                    {
                        id: 'fruits',
                        data: [
                        {
                            name: 'Apples',
                            y: 4
                        },
                        {
                            name: 'Oranges',
                            y: 2,
                            drilldown: 'third-leves'
                        }]
                    },
                    {
                        id: 'cars',
                        data: [
                            ['Toyota', 4],
                            ['Opel', 2],
                            ['Volkswagen', 2]
                        ]
                    },
                    {
                        id: 'third-leves',
                        data: [
                            ['Toyota', 4],
                            ['Opel', 2],
                            ['Volkswagen', 2]
                        ]
                    }]
                }
            }
          } else if(type === '3dpie') {
            return {
              chart: {
                  type: 'pie',
                  options3d: {
                      enabled: true,
                      alpha: 45,
                      beta: 0
                  }
              },
              title: {
                  text: '2014年某网站不同浏览器访问量占比'
              },
              tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
              },
              plotOptions: {
                  pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      depth: 35,
                      dataLabels: {
                          enabled: true,
                          format: '{point.name}'
                      }
                  }
              },
              series: [{
                  type: 'pie',
                  name: '浏览器占比',
                  data: [
                      ['Firefox',   45.0],
                      ['IE',       26.8],
                      {
                          name: 'Chrome',
                          y: 12.8,
                          sliced: true,
                          selected: true
                      },
                      ['Safari',    8.5],
                      ['Opera',     6.2],
                      ['Others',   0.7]
                  ]
              }]
              }
          }
        },
        initChart() {
            console.log(this.$refs.mydiv);
            this.$refs.mydiv.style.width = (this.styles.width || 822) + 'px';
            this.$refs.mydiv.style.height = (this.styles.height || 397) + 'px';
            this.chart = new Highcharts.Chart(this.$refs.mydiv, this.options);
            this.$refs.simpleChart.chart.series[0].update({
                color: '#000'
            });
        },
        handleClick(row) {
            console.log(row);
        },
        headerClick(tab, event) {
            console.log(tab.name);
            // tab.name 为当前选中的选项
            // 1 全部, 2 在途, 3 完成, 4 报警
        },
        headerageClick(tab, event) {
            console.log(tab.name);
            let receipt_data = [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 14, 18, 21, 25, 21, 25, 26, 23, 14, 18, 21];
            let deliver_data = [6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 25, 26, 23, 25, 18, 13, 25, 26, 23, 9, 14, 18, 21];
            console.log(receipt_data.slice(0,5))
            if(tab.name==1){
                this.options.series[0].data = receipt_data.slice(0,1)
                this.options.series[1].data = deliver_data.slice(0,1)
            }else if(tab.name==2){
                this.options.series[0].data = receipt_data.slice(0,7)
                this.options.series[1].data = deliver_data.slice(0,7)
            }else {
                this.options.series[0].data = receipt_data.slice(0,30)
                this.options.series[1].data = deliver_data.slice(0,30)
            }
            this.initChart()
            // 1 当天, 2 7天, 3 30天
        },
        btn_click(value){
            console.log(value)
            switch(value){
                case 1:
                    this.$router.push('/order_list');
                    break;
                case 2:
                    this.$router.push('/tag_list');
                    break;
                case 3:
                    this.$router.push('/order_list');
                    break;
                case 4:
                    this.$router.push('/order_list');
                    break;
            }
        },
        get_order_list(){
            get_order_list_get().then(res => {
                console.log(res.order_list);
                this.order = res.order_list.length
                for(let i=0;i<res.order_list.length;i++){
                    if(res.order_list[i].order_state=='运输中'){
                        this.transit_waybill+=1;
                    }
                    if(res.order_list[i].order_state=='已签收'){
                        this.signed_in +=1
                    }
                }
            })
        },
        get_tags_list() {
            get_tags_list_get().then(res => {
                this.label = res.label_list.length
            })
        },
        

    }
}
</script>

<style scoped>
    .bg-purple-dark {
        background: #fff;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        border-radius: 10px;
        padding: 20px;
    }
    .header-style {
        border-bottom: 1px gray solid;
    }
    .card-table {
        border: none;
        border-radius: 10px;
    }
    .counting-module {
        /* width: 300px; */
        height: 200px;
        margin: 30px;
        border-radius: 0;
    }
    .highcharts-container {
        width: 100vh;
        height: 397px;
        padding: 10px;
    }
    .box-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>